import React, { useState } from 'react'
import { Slider } from 'antd-mobile'

export default () => {
    const [period, setPeriod] = useState(2)

    return (
        <div className='m-picker'>
            <h2> Slider步长为小数时滑动操作异常 </h2>
            <h3>问题</h3>
            <ol>
                <a href='https://jwcmk9.csb.app/'>https://jwcmk9.csb.app/</a>
                <li>无法滑到最后一个位置（数值3）</li>
                <li>连续滑动时滑块会卡在倒数第二个点上，此时onChange回传的值是2.8000000000000003</li>
            </ol>
            <h3>说明</h3>
            <ol>
                <li>设定参数：min={0.2} max={3} step={0.2}</li>
                <li>step设置符合文档要求:取值必须大于 0，并且可被 (max - min) 整除。</li>
                <li>滑动有问题时点击是正常的</li>
                <li>猜测这个问题和浮点计算有关</li>
            </ol>
            <h3>演示</h3>
            <div>
                数值：{period}
                <Slider min={0.2} max={3} step={0.2} value={period} ticks onChange={v => {
                    // console.log('~~v', v)
                    setPeriod((v - 0).toFixed(2) + '')
                    // console.log('~~(v-0).toFixed(2)', (v - 0).toFixed(2) + '')
                }} />
            </div>
        </div>
    )
}